<template>
  <div class="recommend-container">
    <!-- 顶部导航 -->
    <van-nav-bar title="推荐" class="top-nav">
      <template #left>
        <i class="iconfont icon-zuofanhui"></i>
      </template>
      <template #right>
        <i class="iconfont icon-shezhi" style="color:#535353"></i>
      </template>
    </van-nav-bar>
    <!-- 主要内容模块 -->
    <div class="main">
      <!-- 滑动菜单 -->
      <div class="slide-menu">
        <van-image
          class="slide-pic"
          :src="require('@/assets/card1.png')"
          fit="contain"
        ></van-image>
        <van-image
          class="slide-pic"
          :src="require('@/assets/card2.png')"
          fit="contain"
        ></van-image>

        <van-image
          class="slide-pic"
          :src="require('@/assets/card1.png')"
          fit="contain"
        ></van-image>
      </div>
      <!-- 文章区域 -->
      <van-list class="article-list">
        <div class="article">
          <div class="top">
            <van-image
              :src="require('@/assets/头像1.png')"
              class="touxiang"
              fit="contain"
            >
            </van-image>
            <span class="text">
              <p class="name">Kaitlyn</p>
              <span class="time"
                >07月20日 <span class="time1">16:28</span>
              </span>
            </span>
          </div>
          <p class="content">你的伴侣在家</p>
          <van-image
            :src="require('@/assets/recommend1.png')"
            class="banner"
            fit="contain"
          >
          </van-image>
          <div class="btns">
            <div class="pinglun btn">
              <span class="num">268</span>
              <i class="iconfont icon-pinglun"></i>
            </div>
            <div class="fenxiang btn">
              <span class="num">126</span>
              <i class="iconfont icon-fenxiang"></i>
            </div>
            <div class="like btn">
              <span class="num">526</span>
              <i class="iconfont icon-Like"></i>
            </div>
          </div>
        </div>
        <div class="article">
          <div class="top">
            <van-image
              :src="require('@/assets/头像2.png')"
              class="touxiang"
              fit="contain"
            >
            </van-image>
            <span class="text">
              <p class="name">Kaitlyn</p>
              <span class="time"
                >08月26日 <span class="time1">21:12</span>
              </span>
            </span>
          </div>
          <p class="content">满足你的梦想自我</p>
          <van-image
            :src="require('@/assets/recommend2.png')"
            class="banner"
            fit="contain"
          >
          </van-image>
          <div class="btns">
            <div class="pinglun btn">
              <span class="num">233</span>
              <i class="iconfont icon-pinglun"></i>
            </div>
            <div class="fenxiang btn">
              <span class="num">233</span>
              <i class="iconfont icon-fenxiang"></i>
            </div>
            <div class="like btn">
              <span class="num">233</span>
              <i class="iconfont icon-Like"></i>
            </div>
          </div>
        </div>
        <div class="article">
          <div class="top">
            <van-image
              :src="require('@/assets/头像1.png')"
              class="touxiang"
              fit="contain"
            >
            </van-image>
            <span class="text">
              <p class="name">Kaitlyn</p>
              <span class="time"
                >07月20日 <span class="time1">16:28</span>
              </span>
            </span>
          </div>
          <p class="content">你的伴侣在家</p>
          <van-image
            :src="require('@/assets/recommend1.png')"
            class="banner"
            fit="contain"
          >
          </van-image>
          <div class="btns">
            <div class="pinglun btn">
              <span class="num">268</span>
              <i class="iconfont icon-pinglun"></i>
            </div>
            <div class="fenxiang btn">
              <span class="num">126</span>
              <i class="iconfont icon-fenxiang"></i>
            </div>
            <div class="like btn">
              <span class="num">526</span>
              <i class="iconfont icon-Like"></i>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {}
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
// @import url('~@/styles/nav-bar.less'); //引入navbar样式
.recommend-container {
  .main {
    overflow-y: auto;
    height: 93vh;
  }

  .channels-list {
    height: 94vh;
    overflow-y: auto;
    padding: 0 57px;
    .channel {
      margin-top: 40px;
      .good-pic {
        width: 308px;
        height: 172px;
      }
      .tit {
        margin: unset;
        font-family: PingFangSC-Medium;
        font-size: 24px;
        color: #484747;
        font-weight: normal;
        line-height: 36px;
      }
      .dsc {
        margin: unset;
        font-family: PingFangSC-Medium;
        font-size: 20px;
        color: #9b9b9b;
        font-weight: normal;
        line-height: 30px;
      }
    }
    .van-grid-item__content--center {
      padding: unset;
    }
  }
  // 取消自带边框
  [class*='van-hairline']::after {
    border: none;
  }
  //主要内容模块
  //滑动菜单
  .slide-menu {
    padding-left: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    .slide-pic {
      border-radius: 20px;
      margin-right: 40px;
      width: 232px;
      height: 172px;
    }
  }
  .article-list {
    padding: 0 58px;
    .article {
      margin-bottom: 40px;
      .top {
        margin-left: 10px;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        .touxiang {
          width: 60px;
          height: 60px;
        }
        .name {
          padding-right: 50px;
          font-family: PingFangSC-Medium;
          font-size: 22px;
          color: #5a5a5b;
          margin: unset;
        }
        .time {
          margin: unset;
          font-family: PingFang-SC-Medium;
          font-size: 18px;
          color: #9b9b9b;
        }
        .text {
          margin-left: 7px;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }
      .content {
        margin-left: 11px;
        text-align: left;
        font-family: PingFangSC-Medium;
        font-size: 26px;
        color: #4a4a4a;
      }
      .banner {
        width: 634px;
        height: 296px;
      }
      .btns {
        display: flex;
        .btn {
          width: 33.33%;
          .num {
            font-family: PingFangSC-Heavy;
            font-size: 20px;
            color: #a6a6b0;
          }
          .iconfont {
            margin-left: 5px;
            font-size: 32px;
            color: #a6a6b0;
          }
        }
      }
    }
  }
}
</style>
